<template>

	<div class="search-box">
		<div class="row">
			<div class="mb-3 col-auto">
				<input type="text" class="form-control" :placeholder="$t('keywords') + ': ' + $t('name')"
					v-model="conditions.name" @keyup.enter="search">
			</div>

			<div class="col-auto">
				<button class="btn btn-success" @click="search">
					{{ $t('search') }}
				</button>
			</div>
		</div>
	</div>


	<div class="contest-table">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>ID</th>
					<th>{{ $t('title') }}</th>
					<th>{{ $t('status') }}</th>
					<th>{{ $t('admin') }}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in contests" :key="item.id" @click="toContestPage(item.id)"
					@contextmenu.prevent="toContestPage(item.id, true)">
					<td>{{ item.id }}</td>
					<td class="link-color">
						<!-- <span class="glyphicon glyphicon-lock text-danger"></span> -->
						{{ item.name }}
					</td>
					<td :style="'color:' + item.statusColor">
						{{ $t(item.statusName) }} @ {{ item.time }}
					</td>
					<td>{{ item.usernick }} ( {{ item.username }} )</td>
				</tr>
			</tbody>
		</table>
	</div>


	<Pagination :page-info="pageInfo" :get-page-url="getPageUrl" />
</template>


<script type="module">
import Pagination from '@/components/Pagination.vue';
import { ContestService, ContestStatusService, Router } from '@/common/common.object'
import { pageInfo } from '@/common/pagination';

export default {
	data() {
		return {
			contests: null,
			conditions: {},
			pageInfo: null,
		};
	},
	components: {
		Pagination,
	},
	created() {
		this.search();
	},
	methods: {
		toContestPage(contestId, onNewPage = false) {
			this.$toPage(Router.page.contest.index(contestId), onNewPage);
		},
		getPageUrl(pageNumber, pageSize = this.$route.query.pageSize) {
			return Router.page.contests(pageNumber, pageSize);
		},
		search() {
			ContestService.getPage(this.$route.query.pageNumber, this.$route.query.pageSize, this.conditions).then(result => {
				this.pageInfo = pageInfo(result);
				this.contests = ContestStatusService.processes(result.list);
			});
		},
	}
};
</script>


<style scope>
table>tbody>tr {
	cursor: pointer;
}

table>thead>tr>th {
	border-top: none !important;
}
</style>
